<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情监控系统 - 青岛民营企业联合投资集团</title>
    <!-- 引入 Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            text-align: center;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            color: #7f8c8d;
            font-size: 1.2em;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        .articles-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .section-header {
            background: #34495e;
            color: white;
            padding: 20px 30px;
            font-size: 1.3em;
            font-weight: 500;
        }
        
        .articles-list {
            max-height: 600px;
            overflow-y: auto;
        }
        
        .article-item {
            padding: 20px 30px;
            border-bottom: 1px solid #ecf0f1;
            transition: background-color 0.3s ease;
        }
        
        .article-item:hover {
            background-color: #f8f9fa;
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-title {
            font-size: 1.1em;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .article-title a {
            color: #2c3e50;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .article-title a:hover {
            color: #3498db;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .article-source {
            background: #3498db;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        
        .article-keywords {
            background: #e74c3c;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        
        .article-time {
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        .refresh-btn {
            background: #27ae60;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 20px;
        }
        
        .refresh-btn:hover {
            background: #219a52;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <h1>舆情监控系统</h1>
            <p>青岛民营企业联合投资集团</p>
        </div>
        
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-number" id="totalArticles">-</div>
                <div class="stat-label">总文章数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="todayArticles">-</div>
                <div class="stat-label">今日新增</div>
            </div>
            <div class="stat-card" @click="showSourceDialog" style="cursor: pointer;">
                <div class="stat-number" id="sourceCount">-</div>
                <div class="stat-label">监控源数量</div>
            </div>
        </div>
        
        <div class="articles-section">
            <div class="section-header">
                最新舆情信息
                <button class="refresh-btn" onclick="loadData()">刷新数据</button>
            </div>
            <div class="articles-list" id="articlesList">
                <div class="loading">正在加载数据...</div>
            </div>
        </div>
        
        <!-- 监控源详情弹窗 -->
 
    </div>
    
    <script>
        // 加载统计数据
        async function loadStatistics() {
            try {
                const response = await fetch('/api/statistics');
                const stats = await response.json();
                
                document.getElementById('totalArticles').textContent = stats.total_articles;
                document.getElementById('todayArticles').textContent = stats.today_articles;
                document.getElementById('sourceCount').textContent = stats.source_stats.length;
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }
        
        // 加载文章列表
        async function loadArticles() {
            try {
                const response = await fetch('/api/articles?limit=50');
                const articles = await response.json();
                
                const articlesList = document.getElementById('articlesList');
                
                if (articles.length === 0) {
                    articlesList.innerHTML = '<div class="no-data">暂无相关舆情信息</div>';
                    return;
                }
                
                const articlesHTML = articles.map(article => {
                    const date = new Date(article.created_at).toLocaleString('zh-CN');
                    return `
                        <div class="article-item">
                            <div class="article-title">
                                <a href="${article.url}" target="_blank">${article.title}</a>
                            </div>
                            <div class="article-meta">
                                <span class="article-source">${article.source}</span>
                                <span class="article-keywords">关键词: ${article.keywords}</span>
                                <span class="article-time">${date}</span>
                            </div>
                        </div>
                    `;
                }).join('');
                
                articlesList.innerHTML = articlesHTML;
            } catch (error) {
                console.error('加载文章失败:', error);
                document.getElementById('articlesList').innerHTML = 
                    '<div class="no-data">加载数据失败，请稍后重试</div>';
            }
        }
        
        // 加载所有数据
        async function loadData() {
            document.getElementById('articlesList').innerHTML = '<div class="loading">正在加载数据...</div>';
            await Promise.all([loadStatistics(), loadArticles()]);
        }
        
        // 初始化Vue实例
        const app = new Vue({
            el: '#app',
            data: {
                sourceDialogVisible: false,
                sourceLoading: false,
                sourceList: []
            },
            methods: {
                // 显示监控源弹窗
                async showSourceDialog() {
                    this.sourceDialogVisible = true;
                    this.sourceLoading = true;
                    
                    try {
                        const response = await fetch('/api/sources');
                        const data = await response.json();
                        
                        // 计算总数和百分比
                        const total = data.reduce((sum, item) => sum + item.count, 0);
                        this.sourceList = data.map(item => ({
                            source: item.source,
                            count: item.count,
                            percentage: total > 0 ? ((item.count / total) * 100).toFixed(1) : 0
                        }));
                    } catch (error) {
                        console.error('获取监控源数据失败:', error);
                        this.$message.error('获取监控源数据失败');
                    } finally {
                        this.sourceLoading = false;
                    }
                },
                
                // 关闭弹窗
                handleClose(done) {
                    this.sourceDialogVisible = false;
                    if (done) done();
                }
            },
            mounted() {
                // 页面加载完成后执行
                loadData();
                
                // 每5分钟自动刷新一次
                setInterval(loadData, 5 * 60 * 1000);
            }
        });
    </script>
</body>
</html>